    <style include="cr-hidden-style cr-icons">
      dialog {
        --scroll-border-color: var(--paper-grey-300);
        --scroll-border: 1px solid var(--scroll-border-color);
        background-color: var(--cr-dialog-background-color, white);
        border: 0;
        border-radius: 8px;
        bottom: 50%;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.12),
                    0 16px 16px rgba(0, 0, 0, 0.24);
        color: inherit;
        max-height: initial;
        max-width: initial;
        overflow-y: hidden;
        padding: 0;
        position: absolute;
        top: 50%;
        width: var(--cr-dialog-width, 512px);
      }

      @media (prefers-color-scheme: dark) {
        dialog {
          --scroll-border-color: var(--google-grey-700);
          background-color: var(--cr-dialog-background-color,
              var(--google-grey-900));
          /* Note: the colors in linear-gradient() are intentionally the same to
           * add a 4% white layer on top of the fully opaque background-color. */
          background-image: linear-gradient(rgba(255, 255, 255, .04),
                                            rgba(255, 255, 255, .04));
        }
      }

      @media (forced-colors: active) {
        dialog {
          /* Use border instead of box-shadow (which does not work) in Windows
             HCM. */
          border: var(--cr-border-hcm);
        }
      }

      dialog[open] #content-wrapper {
        /* Keep max-height within viewport, and flex content accordingly. */
        display: flex;
        flex-direction: column;
        max-height: 100vh;
        overflow: auto;
      }

      /* When needing to flex, force .body-container alone to shrink. */
      .top-container,
      :host ::slotted([slot=button-container]),
      :host ::slotted([slot=footer]) {
        flex-shrink: 0;
      }

      dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.6);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
      }

      :host ::slotted([slot=body]) {
        color: var(--cr-secondary-text-color);
        padding: 0 var(--cr-dialog-body-padding-horizontal, 20px);
      }

      :host ::slotted([slot=title]) {
        color: var(--cr-primary-text-color);
        flex: 1;
        font-family: var(--cr-dialog-font-family, inherit);
        font-size: var(--cr-dialog-title-font-size, calc(15 / 13 * 100%));
        line-height: 1;
        padding-bottom: var(--cr-dialog-title-slot-padding-bottom, 16px);
        padding-inline-end:  var(--cr-dialog-title-slot-padding-end, 20px);
        padding-inline-start: var(--cr-dialog-title-slot-padding-start, 20px);
        padding-top: var(--cr-dialog-title-slot-padding-top, 20px);
      }

      :host ::slotted([slot=button-container]) {
        display: flex;
        justify-content: flex-end;
        padding-bottom: var(--cr-dialog-button-container-padding-bottom, 16px);
        padding-inline-end: var(--cr-dialog-button-container-padding-horizontal, 16px);
        padding-inline-start: var(--cr-dialog-button-container-padding-horizontal, 16px);
        padding-top: 24px;
      }

      :host ::slotted([slot=footer]) {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        border-top: 1px solid #dbdbdb;
        margin: 0;
        padding: 16px 20px;
      }

      :host([hide-backdrop]) dialog::backdrop {
        opacity: 0;
      }

      @media (prefers-color-scheme: dark) {
        :host ::slotted([slot=footer]) {
          border-top-color: var(--cr-separator-color);
        }
      }

      .body-container {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        min-height: 1.375rem; /* Minimum reasonably usable height. */
        overflow: auto;
      }

      :host {
        --transparent-border: 1px solid transparent;
      }

      /* Cr Dialog uses borders instead of box-shadows. */
      #cr-container-shadow-top {
        border-bottom: var(--cr-dialog-body-border-top,
            var(--transparent-border));
      }

      #cr-container-shadow-bottom {
        border-bottom: var(--cr-dialog-body-border-bottom,
            var(--transparent-border));
      }

      #cr-container-shadow-top.has-shadow,
      #cr-container-shadow-bottom.has-shadow {
        border-bottom: var(--scroll-border);
      }

      .top-container {
        align-items: flex-start;
        display: flex;
        min-height: var(--cr-dialog-top-container-min-height, 31px);
      }

      .title-container {
        display: flex;
        flex: 1;
        font-size: inherit;
        font-weight: inherit;
        margin: 0;
        outline: none;
      }

      #close {
        align-self: flex-start;
        margin-inline-end: 4px;
        margin-top: 4px;
      }
    </style>
    <dialog id="dialog" on-close="onNativeDialogClose_"
        on-cancel="onNativeDialogCancel_" part="dialog"
        aria-labelledby="title" aria-describedby="container">
    <!-- This wrapper is necessary, such that the "pulse" animation is not
        erroneously played when the user clicks on the outer-most scrollbar. -->
      <div id="content-wrapper" part="wrapper">
        <div class="top-container">
          <h2 id="title" class="title-container" tabindex="-1">
            <slot name="title"></slot>
          </h2>
          <cr-icon-button id="close" class="icon-clear"
              hidden$="[[!showCloseButton]]" aria-label$="[[closeText]]"
              on-click="cancel" on-keypress="onCloseKeypress_">
          </cr-icon-button>
        </div>
        <slot name="header"></slot>
        <div class="body-container" id="container" show-bottom-shadow
            part="body-container">
          <slot name="body"></slot>
        </div>
        <slot name="button-container"></slot>
        <slot name="footer"></slot>
      </div>
    </dialog>
